<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Form 表单组件 | Vben Admin</title>
    <meta name="description" content="一个开箱即用的前端框架" />
    <link rel="stylesheet" href="/doc-next/assets/style.ffd1e42f.css" />
    <link rel="modulepreload" href="/doc-next/assets/Home.43e6fab2.js" />
    <link rel="modulepreload" href="/doc-next/assets/app.9ea9a1e7.js" />
    <link rel="modulepreload" href="/doc-next/assets/components_form.md.047930e8.lean.js" />
    <link rel="modulepreload" href="/doc-next/assets/app.9ea9a1e7.js" />
    <meta name="author" content="Vbenjs Team" />
    <meta name="keywords" content="vben, vitejs, vite, ant-design-vue, vue" />
    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <meta name="keywords" content="vue vben admin docs" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="twitter:title" content="Form 表单组件 | Vben Admin" />
    <meta property="og:title" content="Form 表单组件 | Vben Admin" />
  </head>
  <body>
    <div id="app"
      ><!--[--><div class="theme"
        ><header class="nav-bar" data-v-172e455d
          ><div class="sidebar-button" data-v-172e455d
            ><svg
              class="icon"
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden="true"
              role="img"
              viewBox="0 0 448 512"
            >
              <path
                fill="currentColor"
                d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"
                class
              ></path></svg></div
          ><a
            class="nav-bar-title"
            href="/doc-next/"
            aria-label="Vben Admin, back to home"
            data-v-172e455d
            data-v-dc837cb8
            ><img class="logo" src="/doc-next/logo.png" alt="Logo" data-v-dc837cb8 /> Vben Admin</a
          ><div class="flex-grow" data-v-172e455d></div
          ><div class="nav" data-v-172e455d
            ><nav class="nav-links" data-v-172e455d data-v-0cf770ed
              ><!--[--><div class="item" data-v-0cf770ed
                ><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792
                  ><button class="button" data-v-d0aba792
                    ><span class="button-text" data-v-d0aba792>指南</span
                    ><span class="right button-arrow" data-v-d0aba792></span></button
                  ><ul class="dialog" data-v-d0aba792
                    ><!--[--><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a class="item" href="/doc-next/guide/introduction" data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>指南</span
                          ><span class="icon" data-v-5354c4e6><!----></span></a
                        ></div
                      ></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a class="item" href="/doc-next/dep/icon" data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>深入</span
                          ><span class="icon" data-v-5354c4e6><!----></span></a
                        ></div
                      ></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a class="item" href="/doc-next/other/faq" data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>其他</span
                          ><span class="icon" data-v-5354c4e6><!----></span></a
                        ></div
                      ></li
                    ><!--]--></ul
                  ></div
                ></div
              ><div class="item" data-v-0cf770ed
                ><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792
                  ><button class="button" data-v-d0aba792
                    ><span class="button-text" data-v-d0aba792>组件</span
                    ><span class="right button-arrow" data-v-d0aba792></span></button
                  ><ul class="dialog" data-v-d0aba792
                    ><!--[--><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a class="item" href="/doc-next/components/introduction" data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>介绍</span
                          ><span class="icon" data-v-5354c4e6><!----></span></a
                        ></div
                      ></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a class="item" href="/doc-next/components/glob/button" data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>全局组件</span
                          ><span class="icon" data-v-5354c4e6><!----></span></a
                        ></div
                      ></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a class="item" href="/doc-next/components/basic" data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>常用组件</span
                          ><span class="icon" data-v-5354c4e6><!----></span></a
                        ></div
                      ></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item"
                          href="/doc-next/components/functional/context-menu"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>函数式组件</span
                          ><span class="icon" data-v-5354c4e6><!----></span></a
                        ></div
                      ></li
                    ><!--]--></ul
                  ></div
                ></div
              ><div class="item" data-v-0cf770ed
                ><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792
                  ><button class="button" data-v-d0aba792
                    ><span class="button-text" data-v-d0aba792>相关链接</span
                    ><span class="right button-arrow" data-v-d0aba792></span></button
                  ><ul class="dialog" data-v-d0aba792
                    ><!--[--><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item isExternal"
                          href="https://discord.gg/8GuAdwDhj6"
                          target="_blank"
                          rel="noopener noreferrer"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>Discord Chat</span
                          ><span class="icon" data-v-5354c4e6
                            ><svg
                              class="icon outbound"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                              x="0px"
                              y="0px"
                              viewbox="0 0 100 100"
                              width="15"
                              height="15"
                              data-v-5354c4e6
                            >
                              <path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                              ></path>
                              <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                              ></polygon></svg></span></a></div></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item isExternal"
                          href="https://vvbin.cn/next"
                          target="_blank"
                          rel="noopener noreferrer"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>完整版预览</span
                          ><span class="icon" data-v-5354c4e6
                            ><svg
                              class="icon outbound"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                              x="0px"
                              y="0px"
                              viewbox="0 0 100 100"
                              width="15"
                              height="15"
                              data-v-5354c4e6
                            >
                              <path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                              ></path>
                              <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                              ></polygon></svg></span></a></div></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item isExternal"
                          href="https://github.com/anncwb/vue-vben-admin"
                          target="_blank"
                          rel="noopener noreferrer"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>完整版源码</span
                          ><span class="icon" data-v-5354c4e6
                            ><svg
                              class="icon outbound"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                              x="0px"
                              y="0px"
                              viewbox="0 0 100 100"
                              width="15"
                              height="15"
                              data-v-5354c4e6
                            >
                              <path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                              ></path>
                              <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                              ></polygon></svg></span></a></div></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item isExternal"
                          href="https://vvbin.cn/thin/next"
                          target="_blank"
                          rel="noopener noreferrer"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>精简版预览</span
                          ><span class="icon" data-v-5354c4e6
                            ><svg
                              class="icon outbound"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                              x="0px"
                              y="0px"
                              viewbox="0 0 100 100"
                              width="15"
                              height="15"
                              data-v-5354c4e6
                            >
                              <path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                              ></path>
                              <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                              ></polygon></svg></span></a></div></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item isExternal"
                          href="https://github.com/anncwb/vben-admin-thin-next"
                          target="_blank"
                          rel="noopener noreferrer"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>精简版源码</span
                          ><span class="icon" data-v-5354c4e6
                            ><svg
                              class="icon outbound"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                              x="0px"
                              y="0px"
                              viewbox="0 0 100 100"
                              width="15"
                              height="15"
                              data-v-5354c4e6
                            >
                              <path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                              ></path>
                              <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                              ></polygon></svg></span></a></div></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item isExternal"
                          href="https://github.com/anncwb/vue-vben-admin-doc"
                          target="_blank"
                          rel="noopener noreferrer"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>文档源码</span
                          ><span class="icon" data-v-5354c4e6
                            ><svg
                              class="icon outbound"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                              x="0px"
                              y="0px"
                              viewbox="0 0 100 100"
                              width="15"
                              height="15"
                              data-v-5354c4e6
                            >
                              <path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                              ></path>
                              <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                              ></polygon></svg></span></a></div></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item isExternal"
                          href="https://github.com/anncwb/vue-vben-admin/blob/main/CHANGELOG.md"
                          target="_blank"
                          rel="noopener noreferrer"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>更新日志</span
                          ><span class="icon" data-v-5354c4e6
                            ><svg
                              class="icon outbound"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                              x="0px"
                              y="0px"
                              viewbox="0 0 100 100"
                              width="15"
                              height="15"
                              data-v-5354c4e6
                            >
                              <path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                              ></path>
                              <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                              ></polygon></svg></span></a></div></li
                    ><!--]--></ul
                  ></div
                ></div
              ><div class="item" data-v-0cf770ed
                ><div class="nav-link" data-v-0cf770ed data-v-5d86132c
                  ><a class="item" href="/doc-next/other/donate" data-v-5d86132c
                    >赞助
                    <!----></a
                  ></div
                ></div
              ><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav
            ></div
          ><div class="nav-icons" data-v-172e455d
            ><div class="item" data-v-172e455d
              ><button class="nav-btn" aria-label="Toggle Theme" data-v-172e455d
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="1.2em"
                  height="1.2em"
                  preserveaspectratio="xMidYMid meet"
                  viewbox="0 0 24 24"
                  style="display: none"
                >
                  <path
                    d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938A7.999 7.999 0 0 0 4 12z"
                    fill="currentColor"
                  ></path></svg
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="1.2em"
                  height="1.2em"
                  preserveaspectratio="xMidYMid meet"
                  viewbox="0 0 24 24"
                  style=""
                >
                  <path
                    d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636L5.636 7.05L3.515 4.93zM16.95 18.364l1.414-1.414l2.121 2.121l-1.414 1.414l-2.121-2.121zm2.121-14.85l1.414 1.415l-2.121 2.121l-1.414-1.414l2.121-2.121zM5.636 16.95l1.414 1.414l-2.121 2.121l-1.414-1.414l2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"
                    fill="currentColor"
                  ></path></svg></button></div
            ><div class="item" data-v-172e455d
              ><a
                class="nav-btn"
                href="https://github.com/anncwb/vue-vben-admin"
                target="_blank"
                aria-label="View GitHub Repo"
                data-v-172e455d
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="1.2em"
                  height="1.2em"
                  preserveaspectratio="xMidYMid meet"
                  viewbox="0 0 24 24"
                  data-v-172e455d
                >
                  <path
                    d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588c-.094-.117.34.427.433.539c.19.227.33.365.44.438c.204.137.587.196 1.15.14c.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292c-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047c.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308c1.477-.933 2.613-1.226 3.422-1.096c.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19c.691.936 1.058 2.045 1.058 3.293c0 3.757-1.674 5.665-4.642 6.392c.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716a1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446l.005-.705c.005-.708.007-1.338.007-1.998c0-.697-.183-1.152-.425-1.36c-.661-.57-.326-1.655.54-1.752c2.967-.333 4.337-1.482 4.337-4.66c0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947c-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66c.865.097 1.201 1.177.544 1.748c-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z"
                    fill="currentColor"
                  ></path></svg></a></div></div
          ><!--[--><!--]--></header
        ><!--[--><aside class="sidebar" data-v-3e48a26e
          ><nav class="nav-links nav" data-v-3e48a26e data-v-0cf770ed
            ><!--[--><div class="item" data-v-0cf770ed
              ><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792
                ><button class="button" data-v-d0aba792
                  ><span class="button-text" data-v-d0aba792>指南</span
                  ><span class="right button-arrow" data-v-d0aba792></span></button
                ><ul class="dialog" data-v-d0aba792
                  ><!--[--><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a class="item" href="/doc-next/guide/introduction" data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>指南</span
                        ><span class="icon" data-v-5354c4e6><!----></span></a
                      ></div
                    ></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a class="item" href="/doc-next/dep/icon" data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>深入</span
                        ><span class="icon" data-v-5354c4e6><!----></span></a
                      ></div
                    ></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a class="item" href="/doc-next/other/faq" data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>其他</span
                        ><span class="icon" data-v-5354c4e6><!----></span></a
                      ></div
                    ></li
                  ><!--]--></ul
                ></div
              ></div
            ><div class="item" data-v-0cf770ed
              ><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792
                ><button class="button" data-v-d0aba792
                  ><span class="button-text" data-v-d0aba792>组件</span
                  ><span class="right button-arrow" data-v-d0aba792></span></button
                ><ul class="dialog" data-v-d0aba792
                  ><!--[--><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a class="item" href="/doc-next/components/introduction" data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>介绍</span
                        ><span class="icon" data-v-5354c4e6><!----></span></a
                      ></div
                    ></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a class="item" href="/doc-next/components/glob/button" data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>全局组件</span
                        ><span class="icon" data-v-5354c4e6><!----></span></a
                      ></div
                    ></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a class="item" href="/doc-next/components/basic" data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>常用组件</span
                        ><span class="icon" data-v-5354c4e6><!----></span></a
                      ></div
                    ></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item"
                        href="/doc-next/components/functional/context-menu"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>函数式组件</span
                        ><span class="icon" data-v-5354c4e6><!----></span></a
                      ></div
                    ></li
                  ><!--]--></ul
                ></div
              ></div
            ><div class="item" data-v-0cf770ed
              ><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792
                ><button class="button" data-v-d0aba792
                  ><span class="button-text" data-v-d0aba792>相关链接</span
                  ><span class="right button-arrow" data-v-d0aba792></span></button
                ><ul class="dialog" data-v-d0aba792
                  ><!--[--><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item isExternal"
                        href="https://discord.gg/8GuAdwDhj6"
                        target="_blank"
                        rel="noopener noreferrer"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>Discord Chat</span
                        ><span class="icon" data-v-5354c4e6
                          ><svg
                            class="icon outbound"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            x="0px"
                            y="0px"
                            viewbox="0 0 100 100"
                            width="15"
                            height="15"
                            data-v-5354c4e6
                          >
                            <path
                              fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                            ></path>
                            <polygon
                              fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                            ></polygon></svg></span></a></div></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item isExternal"
                        href="https://vvbin.cn/next"
                        target="_blank"
                        rel="noopener noreferrer"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>完整版预览</span
                        ><span class="icon" data-v-5354c4e6
                          ><svg
                            class="icon outbound"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            x="0px"
                            y="0px"
                            viewbox="0 0 100 100"
                            width="15"
                            height="15"
                            data-v-5354c4e6
                          >
                            <path
                              fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                            ></path>
                            <polygon
                              fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                            ></polygon></svg></span></a></div></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item isExternal"
                        href="https://github.com/anncwb/vue-vben-admin"
                        target="_blank"
                        rel="noopener noreferrer"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>完整版源码</span
                        ><span class="icon" data-v-5354c4e6
                          ><svg
                            class="icon outbound"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            x="0px"
                            y="0px"
                            viewbox="0 0 100 100"
                            width="15"
                            height="15"
                            data-v-5354c4e6
                          >
                            <path
                              fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                            ></path>
                            <polygon
                              fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                            ></polygon></svg></span></a></div></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item isExternal"
                        href="https://vvbin.cn/thin/next"
                        target="_blank"
                        rel="noopener noreferrer"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>精简版预览</span
                        ><span class="icon" data-v-5354c4e6
                          ><svg
                            class="icon outbound"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            x="0px"
                            y="0px"
                            viewbox="0 0 100 100"
                            width="15"
                            height="15"
                            data-v-5354c4e6
                          >
                            <path
                              fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                            ></path>
                            <polygon
                              fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                            ></polygon></svg></span></a></div></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item isExternal"
                        href="https://github.com/anncwb/vben-admin-thin-next"
                        target="_blank"
                        rel="noopener noreferrer"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>精简版源码</span
                        ><span class="icon" data-v-5354c4e6
                          ><svg
                            class="icon outbound"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            x="0px"
                            y="0px"
                            viewbox="0 0 100 100"
                            width="15"
                            height="15"
                            data-v-5354c4e6
                          >
                            <path
                              fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                            ></path>
                            <polygon
                              fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                            ></polygon></svg></span></a></div></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item isExternal"
                        href="https://github.com/anncwb/vue-vben-admin-doc"
                        target="_blank"
                        rel="noopener noreferrer"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>文档源码</span
                        ><span class="icon" data-v-5354c4e6
                          ><svg
                            class="icon outbound"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            x="0px"
                            y="0px"
                            viewbox="0 0 100 100"
                            width="15"
                            height="15"
                            data-v-5354c4e6
                          >
                            <path
                              fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                            ></path>
                            <polygon
                              fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                            ></polygon></svg></span></a></div></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item isExternal"
                        href="https://github.com/anncwb/vue-vben-admin/blob/main/CHANGELOG.md"
                        target="_blank"
                        rel="noopener noreferrer"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>更新日志</span
                        ><span class="icon" data-v-5354c4e6
                          ><svg
                            class="icon outbound"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            x="0px"
                            y="0px"
                            viewbox="0 0 100 100"
                            width="15"
                            height="15"
                            data-v-5354c4e6
                          >
                            <path
                              fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                            ></path>
                            <polygon
                              fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                            ></polygon></svg></span></a></div></li
                  ><!--]--></ul
                ></div
              ></div
            ><div class="item" data-v-0cf770ed
              ><div class="nav-link" data-v-0cf770ed data-v-5d86132c
                ><a class="item" href="/doc-next/other/donate" data-v-5d86132c
                  >赞助
                  <!----></a
                ></div
              ></div
            ><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav
          ><!--[--><!--]--><ul class="sidebar-links" data-v-3e48a26e
            ><!--[--><li class="sidebar-link"
              ><p class="sidebar-link-item">组件</p
              ><ul class="sidebar-links"
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/introduction">前言</a
                  ><!----></li
                ></ul
              ></li
            ><li class="sidebar-link"
              ><p class="sidebar-link-item">全局组件</p
              ><ul class="sidebar-links"
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/glob/button">Button</a
                  ><!----></li
                ></ul
              ></li
            ><li class="sidebar-link"
              ><p class="sidebar-link-item">常用组件</p
              ><ul class="sidebar-links"
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/basic">Basic</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/page">Page</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/icon">Icon</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/auth">Authority</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item active" href="/doc-next/components/form">Form</a
                  ><ul class="sidebar-links"
                    ><li class="sidebar-link"
                      ><a class="sidebar-link-item" href="#usage">Usage</a
                      ><ul class="sidebar-links"
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#useform-方式">useForm 方式</a
                          ><!----></li
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#template-方式">template 方式</a
                          ><!----></li
                        ></ul
                      ></li
                    ><li class="sidebar-link"
                      ><a class="sidebar-link-item" href="#useform">useForm</a
                      ><ul class="sidebar-links"
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#示例">示例</a
                          ><!----></li
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#参数介绍">参数介绍</a
                          ><!----></li
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#methods">Methods</a
                          ><!----></li
                        ></ul
                      ></li
                    ><li class="sidebar-link"
                      ><a class="sidebar-link-item" href="#props">Props</a
                      ><ul class="sidebar-links"
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#colex">ColEx</a
                          ><!----></li
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#actionbuttonoption"
                            >ActionButtonOption</a
                          ><!----></li
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#fieldmaptotime">fieldMapToTime</a
                          ><!----></li
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#formschema">FormSchema</a
                          ><!----></li
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#divider-schema说明"
                            >Divider schema说明</a
                          ><!----></li
                        ></ul
                      ></li
                    ><li class="sidebar-link"
                      ><a class="sidebar-link-item" href="#自行添加需要的组件类型"
                        >自行添加需要的组件类型</a
                      ><ul class="sidebar-links"
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#方式-1">方式 1</a
                          ><!----></li
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#方式-2">方式 2</a
                          ><!----></li
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#render">render</a
                          ><!----></li
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#slot">slot</a
                          ><!----></li
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#ifshow-show-dynamicdisabled"
                            >ifShow/show/dynamicDisabled</a
                          ><!----></li
                        ></ul
                      ></li
                    ><li class="sidebar-link"
                      ><a class="sidebar-link-item" href="#slots">Slots</a
                      ><!----></li
                    ><li class="sidebar-link"
                      ><a class="sidebar-link-item" href="#apiselect">ApiSelect</a
                      ><ul class="sidebar-links"
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#usage-1">Usage</a
                          ><!----></li
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#props-1">Props</a
                          ><!----></li
                        ></ul
                      ></li
                    ><li class="sidebar-link"
                      ><a class="sidebar-link-item" href="#apitreeselect">ApiTreeSelect</a
                      ><ul class="sidebar-links"
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#props-2">Props</a
                          ><!----></li
                        ></ul
                      ></li
                    ><li class="sidebar-link"
                      ><a class="sidebar-link-item" href="#radiobuttongroup">RadioButtonGroup</a
                      ><ul class="sidebar-links"
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#usage-2">Usage</a
                          ><!----></li
                        ><li class="sidebar-link"
                          ><a class="sidebar-link-item" href="#props-3">Props</a
                          ><!----></li
                        ></ul
                      ></li
                    ></ul
                  ></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/table">Table</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/pop-confirm-button"
                    >PopConfirmButton</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/collapse-container"
                    >CollapseContainer</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/scroll-container"
                    >ScrollContainer</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/lazy-container"
                    >LazyContainer</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/code-editor"
                    >CodeEditor</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/json-preview"
                    >JsonPreview</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/count-down">CountDown</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/click-out-side"
                    >ClickOutSide</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/count-to">CountTo</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/cropper">Cropper</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/desc">Description</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/drawer">Drawer</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/modal">Modal</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/flow-chart">FlowChart</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/upload">Upload</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/tree">Tree</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/excel">Excel</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/qrcode">Qrcode</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/markdown">Markdown</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/loading">Loading</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/tinymce">Tinymce</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/time">Time</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/strength-meter"
                    >StrengthMeter</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/verify">Verify</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/transition">Transition</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/virtual-scroll"
                    >VirtualScroll</a
                  ><!----></li
                ></ul
              ></li
            ><li class="sidebar-link"
              ><p class="sidebar-link-item">函数式组件</p
              ><ul class="sidebar-links"
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/functional/context-menu"
                    >ContextMenu</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/functional/loading"
                    >Loading</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/functional/preview"
                    >Preview</a
                  ><!----></li
                ></ul
              ></li
            ><!--]--></ul
          ><!--[--><!--]--></aside
        ><!-- <Slugs /> --><!--]--><!-- TODO: make this button accessible --><div
          class="sidebar-mask"
        ></div
        ><main class="page" data-v-4c107763
          ><div class="container" data-v-4c107763
            ><!--[--><!--]--><div class="content" data-v-4c107763
              ><div data-v-4c107763
                ><h1 id="form-表单组件"
                  ><a class="header-anchor" href="#form-表单组件" aria-hidden="true">#</a> Form
                  表单组件</h1
                ><p>对 <code>antv</code> 的 form 组件进行封装，扩展一些常用的功能</p
                ><blockquote><p>如果文档内没有，可以尝试在在线示例内寻找</p></blockquote
                ><h2 id="usage"
                  ><a class="header-anchor" href="#usage" aria-hidden="true">#</a> Usage</h2
                ><h3 id="useform-方式"
                  ><a class="header-anchor" href="#useform-方式" aria-hidden="true">#</a> useForm
                  方式</h3
                ><p>下面是一个使用简单表单的示例，只有一个输入框</p
                ><div class="language-vue">
                  <pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>m-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicForm</span>
      <span class="token attr-name">:labelWidth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:schemas</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>schemas<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:actionColOptions</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 24 }<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@submit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleSubmit<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> BasicForm<span class="token punctuation">,</span> FormSchema <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/components/Form&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> CollapseContainer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/components/Container&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> useMessage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/hooks/web/useMessage&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> schemas<span class="token operator">:</span> FormSchema<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      field<span class="token operator">:</span> <span class="token string">&#39;field&#39;</span><span class="token punctuation">,</span>
      component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span><span class="token punctuation">,</span>
      label<span class="token operator">:</span> <span class="token string">&#39;字段1&#39;</span><span class="token punctuation">,</span>
      colProps<span class="token operator">:</span> <span class="token punctuation">{</span>
        span<span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      defaultValue<span class="token operator">:</span> <span class="token string">&#39;1&#39;</span><span class="token punctuation">,</span>
      componentProps<span class="token operator">:</span> <span class="token punctuation">{</span>
        placeholder<span class="token operator">:</span> <span class="token string">&#39;自定义placeholder&#39;</span><span class="token punctuation">,</span>
        <span class="token function-variable function">onChange</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">;</span>

  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    components<span class="token operator">:</span> <span class="token punctuation">{</span> BasicForm<span class="token punctuation">,</span> CollapseContainer <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">{</span> createMessage <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useMessage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        schemas<span class="token punctuation">,</span>
        <span class="token function-variable function">handleSubmit</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">values<span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          createMessage<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">&#39;click search,values:&#39;</span> <span class="token operator">+</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>values<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div
                ><h3 id="template-方式"
                  ><a class="header-anchor" href="#template-方式" aria-hidden="true">#</a> template
                  方式</h3
                ><p>所有可调用函数见下方 <code>Methods</code> 说明</p
                ><div class="language-vue">
                  <pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>m-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicForm</span>
        <span class="token attr-name">:schemas</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>schemas<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formElRef<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">:labelWidth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">@submit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleSubmit<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">:actionColOptions</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 24 }<span class="token punctuation">&quot;</span></span>
      <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> BasicForm<span class="token punctuation">,</span> FormSchema<span class="token punctuation">,</span> FormActionType<span class="token punctuation">,</span> FormProps <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/components/Form&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> CollapseContainer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/components/Container&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> schemas<span class="token operator">:</span> FormSchema<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">]</span><span class="token punctuation">;</span>

  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    components<span class="token operator">:</span> <span class="token punctuation">{</span> BasicForm<span class="token punctuation">,</span> CollapseContainer <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> formElRef <span class="token operator">=</span> ref<span class="token operator">&lt;</span>Nullable<span class="token operator">&lt;</span>FormActionType<span class="token operator">&gt;&gt;</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        formElRef<span class="token punctuation">,</span>
        schemas<span class="token punctuation">,</span>
        <span class="token function">setProps</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token operator">:</span> FormProps</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">const</span> formEl <span class="token operator">=</span> formElRef<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
          <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>formEl<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
          formEl<span class="token punctuation">.</span><span class="token function">setProps</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div
                ><h2 id="useform"
                  ><a class="header-anchor" href="#useform" aria-hidden="true">#</a> useForm</h2
                ><p>form 组件还提供了 <code>useForm</code>，方便调用函数内部方法</p
                ><h3 id="示例"
                  ><a class="header-anchor" href="#示例" aria-hidden="true">#</a> 示例</h3
                ><div class="language-vue">
                  <pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicForm</span> <span class="token attr-name">@register</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>register<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@submit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleSubmit<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> BasicForm<span class="token punctuation">,</span> FormSchema<span class="token punctuation">,</span> useForm <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/components/Form/index&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> CollapseContainer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/components/Container/index&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> useMessage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/hooks/web/useMessage&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> schemas<span class="token operator">:</span> FormSchema<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      field<span class="token operator">:</span> <span class="token string">&#39;field1&#39;</span><span class="token punctuation">,</span>
      component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span><span class="token punctuation">,</span>
      label<span class="token operator">:</span> <span class="token string">&#39;字段1&#39;</span><span class="token punctuation">,</span>
      colProps<span class="token operator">:</span> <span class="token punctuation">{</span>
        span<span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      componentProps<span class="token operator">:</span> <span class="token punctuation">{</span>
        placeholder<span class="token operator">:</span> <span class="token string">&#39;自定义placeholder&#39;</span><span class="token punctuation">,</span>
        <span class="token function-variable function">onChange</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">;</span>

  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    components<span class="token operator">:</span> <span class="token punctuation">{</span> BasicForm<span class="token punctuation">,</span> CollapseContainer <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">{</span> createMessage <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useMessage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> <span class="token punctuation">[</span>register<span class="token punctuation">,</span> <span class="token punctuation">{</span> setProps <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useForm</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        labelWidth<span class="token operator">:</span> <span class="token number">120</span><span class="token punctuation">,</span>
        schemas<span class="token punctuation">,</span>
        actionColOptions<span class="token operator">:</span> <span class="token punctuation">{</span>
          span<span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        register<span class="token punctuation">,</span>
        schemas<span class="token punctuation">,</span>
        <span class="token function-variable function">handleSubmit</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">values<span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          createMessage<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">&#39;click search,values:&#39;</span> <span class="token operator">+</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>values<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        setProps<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div
                ><h3 id="参数介绍"
                  ><a class="header-anchor" href="#参数介绍" aria-hidden="true">#</a> 参数介绍</h3
                ><div class="language-ts">
                  <pre><code><span class="token keyword">const</span> <span class="token punctuation">[</span>register<span class="token punctuation">,</span> methods<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useForm</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div
                ><p><strong>参数 props 内的值可以是 computed 或者 ref 类型</strong></p
                ><p><strong>register</strong></p
                ><p
                  >register 用于注册 <code>useForm</code>，如果需要使用 <code>useForm</code> 提供的
                  api，必须将 register 传入组件的 <code>onRegister</code></p
                ><div class="language-vue">
                  <pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicForm</span> <span class="token attr-name">@register</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>register<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@submit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleSubmit<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    components<span class="token operator">:</span> <span class="token punctuation">{</span> BasicForm <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">[</span>register<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        register<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div
                ><p><code>Methods</code>见下方说明</p
                ><h3 id="methods"
                  ><a class="header-anchor" href="#methods" aria-hidden="true">#</a> Methods</h3
                ><p><strong>getFieldsValue</strong></p
                ><p>类型: <code>() =&gt; Recordable;</code></p
                ><p>说明: 获取表单值</p><p><strong>setFieldsValue</strong></p
                ><p>类型: <code>&lt;T&gt;(values: T) =&gt; Promise&lt;void&gt;</code></p
                ><p>说明: 设置表单字段值</p><p><strong>resetFields</strong></p
                ><p>类型: <code>()=&gt; Promise&lt;any&gt;</code></p
                ><p>说明: 重置表单值</p><p><strong>validateFields</strong></p
                ><p>类型: <code>(nameList?: NamePath[]) =&gt; Promise&lt;any&gt;</code></p
                ><p>说明: 校验指定表单项</p><p><strong>validate</strong></p
                ><p>类型: <code>(nameList?: NamePath[]) =&gt; Promise&lt;any&gt;</code></p
                ><p>说明: 校验整个表单</p><p><strong>submit</strong></p
                ><p>类型: <code>() =&gt; Promise&lt;void&gt;</code></p
                ><p>说明: 提交表单</p><p><strong>scrollToField</strong></p
                ><p
                  >类型:
                  <code
                    >(name: NamePath, options?: ScrollOptions) =&gt; Promise&lt;void&gt;</code
                  ></p
                ><p>说明: 滚动到对应字段位置</p><p><strong>clearValidate</strong></p
                ><p>类型: <code>(name?: string | string[]) =&gt; Promise&lt;void&gt;</code></p
                ><p>说明: 清空校验</p><p><strong>setProps</strong></p
                ><div class="tip custom-block"
                  ><p class="custom-block-title">TIP</p
                  ><p
                    >设置表单的 props 可以直接在标签上传递，也可以使用 setProps，或者初始化直接写
                    useForm(props)</p
                  ></div
                ><p
                  >类型:
                  <code>(formProps: Partial&lt;FormProps&gt;) =&gt; Promise&lt;void&gt;</code></p
                ><p>说明: 设置表单 Props</p><p><strong>removeSchemaByFiled</strong></p
                ><p>类型: <code>(field: string | string[]) =&gt; Promise&lt;void&gt;</code></p
                ><p>说明: 根据 field 删除 Schema</p><p><strong>appendSchemaByField</strong></p
                ><p
                  >类型:
                  <code
                    >( schema: FormSchema, prefixField: string | undefined, first?: boolean |
                    undefined ) =&gt; Promise&lt;void&gt;</code
                  ></p
                ><p
                  >说明: 插入到指定 filed 后面，如果没传指定 field，则插入到最后,当 first = true
                  时插入到第一个位置</p
                ><p><strong>updateSchema</strong></p
                ><p
                  >类型:
                  <code
                    >(data: Partial&lt;FormSchema&gt; | Partial&lt;FormSchema&gt;[]) =&gt;
                    Promise&lt;void&gt;</code
                  ></p
                ><p>说明: 更新表单的 schema, 只更新函数所传的参数</p><p>e.g</p
                ><div class="language-ts">
                  <pre><code><span class="token function">updateSchema</span><span class="token punctuation">(</span><span class="token punctuation">{</span> field<span class="token operator">:</span> <span class="token string">&#39;filed&#39;</span><span class="token punctuation">,</span> componentProps<span class="token operator">:</span> <span class="token punctuation">{</span> disabled<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">updateSchema</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
  <span class="token punctuation">{</span> field<span class="token operator">:</span> <span class="token string">&#39;filed&#39;</span><span class="token punctuation">,</span> componentProps<span class="token operator">:</span> <span class="token punctuation">{</span> disabled<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> field<span class="token operator">:</span> <span class="token string">&#39;filed1&#39;</span><span class="token punctuation">,</span> componentProps<span class="token operator">:</span> <span class="token punctuation">{</span> disabled<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div
                ><h2 id="props"
                  ><a class="header-anchor" href="#props" aria-hidden="true">#</a> Props</h2
                ><div class="tip custom-block"
                  ><p class="custom-block-title">温馨提醒</p
                  ><p
                    >除以下参数外，官方文档内的 props 也都支持，具体可以参考
                    <a
                      href="https://2x.antdv.com/components/form-cn/#Form"
                      target="_blank"
                      rel="noopener noreferrer"
                      >antv form</a
                    ></p
                  ></div
                ><table
                  ><thead
                    ><tr
                      ><th>属性</th><th>类型</th><th>默认值</th><th>可选值</th><th>说明</th
                      ><th>版本</th></tr
                    ></thead
                  ><tbody
                    ><tr
                      ><td>schemas</td><td><code>Schema[]</code></td
                      ><td>-</td><td>-</td><td>表单配置，见下方 <code>FormSchema</code> 配置</td
                      ><td></td></tr
                    ><tr
                      ><td>submitOnReset</td><td><code>boolean</code></td
                      ><td><code>true</code></td
                      ><td>-</td><td>重置时是否提交表单</td><td></td></tr
                    ><tr
                      ><td>labelCol</td><td><code>Partial&lt;ColEx&gt;</code></td
                      ><td>-</td><td>-</td><td>整个表单通用 LabelCol 配置</td><td></td></tr
                    ><tr
                      ><td>wrapperCol</td><td><code>Partial&lt;ColEx&gt;</code></td
                      ><td>-</td><td>-</td><td>整个表单通用 wrapperCol 配置</td><td></td></tr
                    ><tr
                      ><td>baseColProps</td><td><code>Partial&lt;ColEx&gt;</code></td
                      ><td>-</td><td>-</td
                      ><td>配置所有选子项的 ColProps，不需要逐个配置，子项也可单独配置优先与全局</td
                      ><td></td></tr
                    ><tr
                      ><td>baseRowStyle</td><td><code>object</code></td
                      ><td>-</td><td>-</td><td>配置所有 Row 的 style 样式</td><td></td></tr
                    ><tr
                      ><td>labelWidth</td><td><code>number , string</code></td
                      ><td>-</td><td>-</td
                      ><td
                        >扩展 form 组件，增加 label
                        宽度，表单内所有组件适用，可以单独在某个项覆盖或者禁用</td
                      ><td></td></tr
                    ><tr
                      ><td>labelAlign</td><td><code>string</code></td
                      ><td>-</td><td><code>left</code>,<code>right</code></td
                      ><td>label 布局</td><td></td></tr
                    ><tr
                      ><td>mergeDynamicData</td><td><code>object</code></td
                      ><td>-</td><td>-</td><td>额外传递到子组件的参数 values</td><td></td></tr
                    ><tr
                      ><td>autoFocusFirstItem</td><td><code>boolean</code></td
                      ><td><code>false</code></td
                      ><td>-</td><td>是否聚焦第一个输入框，只在第一个表单项为 input 的时候作用</td
                      ><td></td></tr
                    ><tr
                      ><td>compact</td><td><code>boolean</code></td
                      ><td><code>false</code></td
                      ><td><code>true/false</code></td
                      ><td>紧凑类型表单，减少 margin-bottom</td><td></td></tr
                    ><tr
                      ><td>size</td><td><code>string</code></td
                      ><td><code>default</code></td
                      ><td><code>&#39;default&#39; , &#39;small&#39; , &#39;large&#39;</code></td
                      ><td>向表单内所有组件传递 size 参数,自定义组件需自行实现 size 接收</td
                      ><td></td></tr
                    ><tr
                      ><td>disabled</td><td><code>boolean</code></td
                      ><td><code>false</code></td
                      ><td><code>true/false</code></td
                      ><td
                        >向表单内所有组件传递 disabled 属性，自定义组件需自行实现 disabled 接收</td
                      ><td></td></tr
                    ><tr
                      ><td>autoSetPlaceHolder</td><td><code>boolean</code></td
                      ><td><code>true</code></td
                      ><td><code> true/false</code></td
                      ><td>自动设置表单内组件的 placeholder，自定义组件需自行实现</td><td></td></tr
                    ><tr
                      ><td>autoSubmitOnEnter</td><td><code>boolean</code></td
                      ><td><code>false</code></td
                      ><td><code> true/false</code></td
                      ><td>在input中输入时按回车自动提交</td><td>2.4.0</td></tr
                    ><tr
                      ><td>rulesMessageJoinLabel</td><td><code>boolean</code></td
                      ><td><code>false</code></td
                      ><td><code>true/false</code></td
                      ><td
                        >如果表单项有校验，会自动生成校验信息，该参数控制是否将字段中文名字拼接到自动生成的信息后方</td
                      ><td></td></tr
                    ><tr
                      ><td>showAdvancedButton</td><td><code>boolean</code></td
                      ><td><code>false</code></td
                      ><td><code>true/false</code></td
                      ><td>是否显示收起展开按钮</td><td></td></tr
                    ><tr
                      ><td>emptySpan</td><td><code>number , Partial&lt;ColEx&gt;</code></td
                      ><td>0</td><td>-</td><td>空白行格,可以是数值或者 col 对象 数</td><td></td></tr
                    ><tr
                      ><td>autoAdvancedLine</td><td><code>number</code></td
                      ><td>3</td><td>-</td
                      ><td>如果 showAdvancedButton 为 true，超过指定行数行默认折叠</td><td></td></tr
                    ><tr
                      ><td>alwaysShowLines</td><td><code>number</code></td
                      ><td>1</td><td>-</td><td>折叠时始终保持显示的行数</td><td>2.7.1</td></tr
                    ><tr
                      ><td>showActionButtonGroup</td><td><code>boolean</code></td
                      ><td><code>true</code></td
                      ><td><code>true/false</code></td
                      ><td>是否显示操作按钮(重置/提交)</td><td></td></tr
                    ><tr
                      ><td>actionColOptions</td><td><code>Partial&lt;ColEx&gt;</code></td
                      ><td>-</td><td>-</td
                      ><td
                        >操作按钮外层 Col 组件配置，如果开启
                        showAdvancedButton，则不用设置，具体见下方 actionColOptions</td
                      ><td></td></tr
                    ><tr
                      ><td>showResetButton</td><td><code>boolean</code></td
                      ><td><code>true</code></td
                      ><td>-</td><td>是否显示重置按钮</td><td></td></tr
                    ><tr
                      ><td>resetButtonOptions</td><td><code>object</code></td
                      ><td></td><td>-</td><td>重置按钮配置见下方 ActionButtonOption</td
                      ><td></td></tr
                    ><tr
                      ><td>showSubmitButton</td><td><code>boolean</code></td
                      ><td><code>true</code></td
                      ><td>-</td><td>是否显示提交按钮</td><td></td></tr
                    ><tr
                      ><td>submitButtonOptions</td><td><code>object</code></td
                      ><td></td><td>-</td><td>确认按钮配置见下方 ActionButtonOption</td
                      ><td></td></tr
                    ><tr
                      ><td>resetFunc</td><td><code> () =&gt; Promise&lt;void&gt;</code></td
                      ><td></td><td>-</td
                      ><td>自定义重置按钮逻辑<code>() =&gt; Promise&lt;void&gt;;</code></td
                      ><td></td></tr
                    ><tr
                      ><td>submitFunc</td><td><code> () =&gt; Promise&lt;void&gt;</code></td
                      ><td></td><td>-</td
                      ><td>自定义提交按钮逻辑<code>() =&gt; Promise&lt;void&gt;;</code></td
                      ><td></td></tr
                    ><tr
                      ><td>fieldMapToTime</td
                      ><td><code>[string, [string, string], string?][]</code></td
                      ><td></td><td>-</td><td>用于将表单内时间区域的应设成 2 个字段,见下方说明</td
                      ><td></td></tr></tbody></table
                ><h3 id="colex"
                  ><a class="header-anchor" href="#colex" aria-hidden="true">#</a> ColEx</h3
                ><p
                  >见<a
                    href="https://github.com/anncwb/vue-vben-admin/tree/main/src/components/Form/src/types/index.ts"
                    target="_blank"
                    rel="noopener noreferrer"
                    >src/components/Form/src/types/index.ts</a
                  ></p
                ><h3 id="actionbuttonoption"
                  ><a class="header-anchor" href="#actionbuttonoption" aria-hidden="true">#</a>
                  ActionButtonOption</h3
                ><p
                  ><a
                    href="https://github.com/anncwb/vue-vben-admin/tree/main/src/components/Button/types.ts"
                    target="_blank"
                    rel="noopener noreferrer"
                    >BasicButtonProps</a
                  ></p
                ><div class="language-ts">
                  <pre><code><span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">ButtonProps</span> <span class="token keyword">extends</span> <span class="token class-name">BasicButtonProps</span> <span class="token punctuation">{</span>
  text<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div
                ><h3 id="fieldmaptotime"
                  ><a class="header-anchor" href="#fieldmaptotime" aria-hidden="true">#</a>
                  fieldMapToTime</h3
                ><p>将表单内时间区域的值映射成 2 个字段</p
                ><p
                  >如果表单内有时间区间组件，获取到的值是一个数组，但是往往我们传递到后台需要是 2
                  个字段</p
                ><div class="language-ts">
                  <pre><code><span class="token function">useForm</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  fieldMapToTime<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token comment">// data为时间组件在表单内的字段，startTime，endTime为转化后的开始时间于结束时间</span>
    <span class="token comment">// &#39;YYYY-MM-DD&#39;为时间格式，参考moment</span>
    <span class="token punctuation">[</span><span class="token string">&#39;datetime&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">&#39;startTime&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;endTime&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string">&#39;YYYY-MM-DD&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token comment">// 支持多个字段</span>
    <span class="token punctuation">[</span><span class="token string">&#39;datetime1&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">&#39;startTime1&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;endTime1&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string">&#39;YYYY-MM-DD HH:mm:ss&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// fieldMapToTime没写的时候表单获取到的值</span>
<span class="token punctuation">{</span>
  datetime<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token function">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token comment">//  [&#39;datetime&#39;, [&#39;startTime&#39;, &#39;endTime&#39;], &#39;YYYY-MM-DD&#39;],之后</span>
<span class="token punctuation">{</span>
    datetime<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token function">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    startTime<span class="token operator">:</span> <span class="token string">&#39;2020-08-12&#39;</span><span class="token punctuation">,</span>
    endTime<span class="token operator">:</span> <span class="token string">&#39;2020-08-15&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div
                ><h3 id="formschema"
                  ><a class="header-anchor" href="#formschema" aria-hidden="true">#</a>
                  FormSchema</h3
                ><table
                  ><thead
                    ><tr
                      ><th>属性</th><th>类型</th><th>默认值</th><th>可选值</th><th>说明</th></tr
                    ></thead
                  ><tbody
                    ><tr
                      ><td>field</td><td><code>string</code></td
                      ><td>-</td><td>-</td><td>字段名</td></tr
                    ><tr
                      ><td>label</td><td><code>string</code></td
                      ><td>-</td><td>-</td><td>标签名</td></tr
                    ><tr
                      ><td>subLabel</td><td><code>string</code></td
                      ><td>-</td><td>-</td><td>二级标签名灰色</td></tr
                    ><tr
                      ><td>suffix</td
                      ><td
                        ><code
                          >string , number , ((values: RenderCallbackParams) =&gt; string /
                          number);</code
                        ></td
                      ><td>-</td><td>-</td><td>组件后面的内容</td></tr
                    ><tr
                      ><td>changeEvent</td><td><code>string</code></td
                      ><td>-</td><td>-</td><td>表单更新事件名称</td></tr
                    ><tr
                      ><td>helpMessage</td><td><code>string , string[]</code></td
                      ><td>-</td><td>-</td><td>标签名右侧温馨提示</td></tr
                    ><tr
                      ><td>helpComponentProps</td><td><code>HelpComponentProps</code></td
                      ><td>-</td><td>-</td
                      ><td>标签名右侧温馨提示组件 props,见下方 HelpComponentProps</td></tr
                    ><tr
                      ><td>labelWidth</td><td><code>string , number</code></td
                      ><td>-</td><td>-</td><td>覆盖统一设置的 labelWidth</td></tr
                    ><tr
                      ><td>disabledLabelWidth</td><td><code>boolean</code></td
                      ><td>false</td><td>true/false</td
                      ><td
                        >禁用 form 全局设置的 labelWidth,自己手动设置 labelCol 和 wrapperCol</td
                      ></tr
                    ><tr
                      ><td>component</td><td><code>string</code></td
                      ><td>-</td><td>-</td><td>组件类型，见下方 ComponentType</td></tr
                    ><tr
                      ><td>componentProps</td><td><code>any,()=&gt;{}</code></td
                      ><td>-</td><td>-</td><td>所渲染的组件的 props</td></tr
                    ><tr
                      ><td>rules</td><td><code>ValidationRule[]</code></td
                      ><td>-</td><td>-</td><td>校验规则,见下方 ValidationRule</td></tr
                    ><tr
                      ><td>required</td><td><code>boolean</code></td
                      ><td>-</td><td>-</td
                      ><td
                        >简化 rules 配置，为 true 则转化成
                        [{required:true}]。<code>2.4.0</code>之前的版本只支持string类型的值</td
                      ></tr
                    ><tr
                      ><td>rulesMessageJoinLabel</td><td><code>boolean</code></td
                      ><td>false</td><td>-</td><td>校验信息是否加入 label</td></tr
                    ><tr
                      ><td>itemProps</td><td><code>any</code></td
                      ><td>-</td><td>-</td><td>参考下方 FormItem</td></tr
                    ><tr
                      ><td>colProps</td><td><code>ColEx</code></td
                      ><td>-</td><td>-</td><td>参考上方 actionColOptions</td></tr
                    ><tr
                      ><td>defaultValue</td><td><code>object</code></td
                      ><td>-</td><td>-</td><td>所渲渲染组件的初始值</td></tr
                    ><tr
                      ><td>render</td
                      ><td
                        ><code
                          >(renderCallbackParams: RenderCallbackParams) =&gt; VNode / VNode[] /
                          string</code
                        ></td
                      ><td>-</td><td>-</td><td>自定义渲染组件</td></tr
                    ><tr
                      ><td>renderColContent</td
                      ><td
                        ><code
                          >(renderCallbackParams: RenderCallbackParams) =&gt; VNode / VNode[] /
                          string</code
                        ></td
                      ><td>-</td><td>-</td><td>自定义渲染组件（需要自行包含 formItem）</td></tr
                    ><tr
                      ><td>renderComponentContent</td
                      ><td
                        ><code
                          >(renderCallbackParams: RenderCallbackParams) =&gt; any / string</code
                        ></td
                      ><td>-</td><td>-</td><td>自定义渲染组内部的 slot</td></tr
                    ><tr
                      ><td>slot</td><td><code>string</code></td
                      ><td>-</td><td>-</td><td>自定义 slot，渲染组件</td></tr
                    ><tr
                      ><td>colSlot</td><td><code>string</code></td
                      ><td>-</td><td>-</td
                      ><td>自定义 slot，渲染组件 （需要自行包含 formItem）</td></tr
                    ><tr
                      ><td>show</td
                      ><td
                        ><code>
                          boolean / ((renderCallbackParams: RenderCallbackParams) =&gt;
                          boolean)</code
                        ></td
                      ><td>-</td><td>-</td
                      ><td>动态判断当前组件是否显示，css 控制，不会删除 dom</td></tr
                    ><tr
                      ><td>ifShow</td
                      ><td
                        ><code>
                          boolean / ((renderCallbackParams: RenderCallbackParams) =&gt;
                          boolean)</code
                        ></td
                      ><td>-</td><td>-</td
                      ><td>动态判断当前组件是否显示，js 控制，会删除 dom</td></tr
                    ><tr
                      ><td>dynamicDisabled</td
                      ><td
                        ><code
                          >boolean / ((renderCallbackParams: RenderCallbackParams) =&gt; boolean)
                        </code></td
                      ><td>-</td><td>-</td><td>动态判断当前组件是否禁用</td></tr
                    ><tr
                      ><td>dynamicRules</td
                      ><td
                        ><code
                          >boolean / ((renderCallbackParams: RenderCallbackParams) =&gt;
                          boolean)</code
                        ></td
                      ><td>-</td><td>-</td><td>动态判返当前组件你校验规则</td></tr
                    ></tbody
                  ></table
                ><p><strong>RenderCallbackParams</strong></p
                ><div class="language-ts">
                  <pre><code><span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">RenderCallbackParams</span> <span class="token punctuation">{</span>
  schema<span class="token operator">:</span> FormSchema<span class="token punctuation">;</span>
  values<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
  model<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
  field<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div
                ><p><strong>componentProps</strong></p
                ><ul
                  ><li
                    ><p
                      >当值为对象类型时,该对象将作为<code>component</code>所对应组件的的 props
                      传入组件</p
                    ></li
                  ><li><p>当值为一个函数时候</p></li></ul
                ><p>参数有 4 个</p><p><code>schema</code>: 表单的整个 schemas</p
                ><p><code>formActionType</code>: 操作表单的函数。与 useForm 返回的操作函数一致</p
                ><p
                  ><code>formModel</code>:
                  表单的双向绑定对象，这个值是响应式的。所以可以方便处理很多操作</p
                ><p
                  ><code>tableAction</code>: 操作表格的函数，与 useTable
                  返回的操作函数一致。注意该参数只在表格内开启搜索表单的时候有值，其余情况为<code>null</code>,</p
                ><div class="language-tsx">
                  <pre><code><span class="token punctuation">{</span>
  <span class="token comment">// 简单例子，值改变的时候操作表格或者修改表单内其他元素的值</span>
  component<span class="token operator">:</span><span class="token string">&#39;Input&#39;</span><span class="token punctuation">,</span>
  <span class="token function-variable function">componentProps</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> schema<span class="token punctuation">,</span> tableAction<span class="token punctuation">,</span> formActionType<span class="token punctuation">,</span> formModel <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token comment">// xxxx props</span>
      <span class="token function-variable function">onChange</span><span class="token operator">:</span><span class="token parameter">e</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span>reload<span class="token punctuation">}</span><span class="token operator">=</span>tableAction
        <span class="token function">reload</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token comment">// or</span>
        formModel<span class="token punctuation">.</span>xxx<span class="token operator">=</span><span class="token string">&#39;123&#39;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div
                ><p><strong>HelpComponentProps</strong></p
                ><div class="language-ts">
                  <pre><code><span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">HelpComponentProps</span> <span class="token punctuation">{</span>
  maxWidth<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  <span class="token comment">// 是否显示序号</span>
  showIndex<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  <span class="token comment">// 文本列表</span>
  text<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
  <span class="token comment">// 颜色</span>
  color<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  <span class="token comment">// 字体大小</span>
  fontSize<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  icon<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  absolute<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  <span class="token comment">// 定位</span>
  position<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div
                ><p><strong>ComponentType</strong></p
                ><p>schema 内组件的可选类型</p
                ><div class="language-tsx">
                  <pre><code><span class="token keyword">export</span> <span class="token keyword">type</span> <span class="token class-name">ComponentType</span> <span class="token operator">=</span>
  <span class="token operator">|</span> <span class="token string">&#39;Input&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;InputGroup&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;InputPassword&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;InputSearch&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;InputTextArea&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;InputNumber&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;InputCountDown&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;Select&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;ApiSelect&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;TreeSelect&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;RadioButtonGroup&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;RadioGroup&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;Checkbox&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;CheckboxGroup&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;AutoComplete&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;Cascader&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;DatePicker&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;MonthPicker&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;RangePicker&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;WeekPicker&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;TimePicker&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;Switch&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;StrengthMeter&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;Upload&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;IconPicker&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;Render&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;Slider&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;Rate&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;Divider&#39;</span><span class="token punctuation">;</span>  <span class="token comment">// v2.7.2新增</span>
</code></pre></div
                ><h3 id="divider-schema说明"
                  ><a class="header-anchor" href="#divider-schema说明" aria-hidden="true">#</a>
                  Divider schema说明</h3
                ><p
                  ><code>Divider</code
                  >类型用于在<code>schemas</code>中占位，将会渲染成一个分割线（始终占一整行的版面），可以用于较长表单的版面分隔。请只将Divider类型的schema当作一个分割线，而不是一个常规的表单字段。</p
                ><ul
                  ><li
                    ><strong
                      ><code>Divider</code
                      >仅在<code>showAdvancedButton</code>为false时才会显示</strong
                    >（也就是说如果启用了表单收起和展开功能，<code>Divider</code>将不会显示）</li
                  ><li
                    ><code>Divider</code>
                    使用<code>schema</code>中的<code>label</code>以及<code>helpMessage</code>来渲染分割线中的提示内容</li
                  ><li
                    ><code>Divider</code>
                    可以使用<code>componentProps</code>来设置除<code>type</code>之外的props</li
                  ><li
                    ><code>Divider</code>
                    不会渲染<code>AFormItem</code>，因此<code>schema</code>中除<code>label</code>、<code>componentProps</code>、<code>helpMessage</code>、<code>helpComponentProps</code>以外的属性不会被用到</li
                  ></ul
                ><h2 id="自行添加需要的组件类型"
                  ><a class="header-anchor" href="#自行添加需要的组件类型" aria-hidden="true">#</a>
                  自行添加需要的组件类型</h2
                ><p
                  >在
                  <code>src/components/Form/src/componentMap.ts</code> 内，添加需要的组件，并在上方
                  <strong>ComponentType</strong> 添加相应的类型 key</p
                ><h3 id="方式-1"
                  ><a class="header-anchor" href="#方式-1" aria-hidden="true">#</a> 方式 1</h3
                ><p>这种写法适用与适用频率较高的组件</p
                ><div class="language-tsx">
                  <pre><code>componentMap<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">&#39;componentName&#39;</span><span class="token punctuation">,</span> 组件<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// ComponentType</span>
<span class="token keyword">export</span> <span class="token keyword">type</span> <span class="token class-name">ComponentType</span> <span class="token operator">=</span> xxxx <span class="token operator">|</span> <span class="token string">&#39;componentName&#39;</span><span class="token punctuation">;</span>
</code></pre></div
                ><h3 id="方式-2"
                  ><a class="header-anchor" href="#方式-2" aria-hidden="true">#</a> 方式 2</h3
                ><p>使用 <strong>useComponentRegister</strong> 进行注册</p
                ><p>这种写法只能在当前页使用，页面销毁之后会从 componentMap 删除相应的组件</p
                ><div class="language-tsx">
                  <pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useComponentRegister <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@/components/form/index&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token punctuation">{</span> StrengthMeter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@/components/strength-meter/index&#39;</span><span class="token punctuation">;</span>

<span class="token function">useComponentRegister</span><span class="token punctuation">(</span><span class="token string">&#39;StrengthMeter&#39;</span><span class="token punctuation">,</span> StrengthMeter<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div
                ><div class="tip custom-block"
                  ><p class="custom-block-title">提示</p
                  ><p
                    >方式 2 出现的原因是为了减少打包体积，如果某个组件体积很大，用方式 1
                    的话可能会使首屏体积增加</p
                  ></div
                ><h3 id="render"
                  ><a class="header-anchor" href="#render" aria-hidden="true">#</a> render</h3
                ><p>自定义渲染内容</p
                ><div class="language-vue">
                  <pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>m-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicForm</span> <span class="token attr-name">@register</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>register<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@submit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleSubmit<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> h <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> BasicForm<span class="token punctuation">,</span> FormSchema<span class="token punctuation">,</span> useForm <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/components/Form/index&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> useMessage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/hooks/web/useMessage&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> Input <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;ant-design-vue&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> schemas<span class="token operator">:</span> FormSchema<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      field<span class="token operator">:</span> <span class="token string">&#39;field1&#39;</span><span class="token punctuation">,</span>
      component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span><span class="token punctuation">,</span>
      label<span class="token operator">:</span> <span class="token string">&#39;字段1&#39;</span><span class="token punctuation">,</span>
      colProps<span class="token operator">:</span> <span class="token punctuation">{</span>
        span<span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      rules<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> model<span class="token punctuation">,</span> field <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token function">h</span><span class="token punctuation">(</span>Input<span class="token punctuation">,</span> <span class="token punctuation">{</span>
          placeholder<span class="token operator">:</span> <span class="token string">&#39;请输入&#39;</span><span class="token punctuation">,</span>
          value<span class="token operator">:</span> model<span class="token punctuation">[</span>field<span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token function-variable function">onChange</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token operator">:</span> ChangeEvent</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            model<span class="token punctuation">[</span>field<span class="token punctuation">]</span> <span class="token operator">=</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      field<span class="token operator">:</span> <span class="token string">&#39;field2&#39;</span><span class="token punctuation">,</span>
      component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span><span class="token punctuation">,</span>
      label<span class="token operator">:</span> <span class="token string">&#39;字段2&#39;</span><span class="token punctuation">,</span>
      colProps<span class="token operator">:</span> <span class="token punctuation">{</span>
        span<span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      rules<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token function-variable function">renderComponentContent</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
          <span class="token function-variable function">suffix</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token string">&#39;suffix&#39;</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    components<span class="token operator">:</span> <span class="token punctuation">{</span> BasicForm <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">{</span> createMessage <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useMessage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> <span class="token punctuation">[</span>register<span class="token punctuation">,</span> <span class="token punctuation">{</span> setProps <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useForm</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        labelWidth<span class="token operator">:</span> <span class="token number">120</span><span class="token punctuation">,</span>
        schemas<span class="token punctuation">,</span>
        actionColOptions<span class="token operator">:</span> <span class="token punctuation">{</span>
          span<span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        register<span class="token punctuation">,</span>
        schemas<span class="token punctuation">,</span>
        <span class="token function-variable function">handleSubmit</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">values<span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          createMessage<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">&#39;click search,values:&#39;</span> <span class="token operator">+</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>values<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        setProps<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div
                ><h3 id="slot"
                  ><a class="header-anchor" href="#slot" aria-hidden="true">#</a> slot</h3
                ><p>自定义渲染内容</p
                ><div class="tip custom-block"
                  ><p class="custom-block-title">提示</p
                  ><p
                    >使用插槽自定义表单域时，请注意antdv有关FormItem的<a
                      href="https://2x.antdv.com/components/form-cn#API"
                      target="_blank"
                      rel="noopener noreferrer"
                      >相关说明</a
                    >。</p
                  ></div
                ><div class="language-vue">
                  <pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>m-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicForm</span> <span class="token attr-name">@register</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>register<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#customSlot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ model, field }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>model[field]<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BasicForm</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;compatible-vue&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> BasicForm<span class="token punctuation">,</span> useForm <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@/components/Form/index&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> BasicModal <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@/components/modal/index&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&#39;FormDemo&#39;</span><span class="token punctuation">,</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">[</span>register<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useForm</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        labelWidth<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
        actionColOptions<span class="token operator">:</span> <span class="token punctuation">{</span>
          span<span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        schemas<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            field<span class="token operator">:</span> <span class="token string">&#39;field1&#39;</span><span class="token punctuation">,</span>
            label<span class="token operator">:</span> <span class="token string">&#39;字段1&#39;</span><span class="token punctuation">,</span>
            slot<span class="token operator">:</span> <span class="token string">&#39;customSlot&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        register<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div
                ><h3 id="ifshow-show-dynamicdisabled"
                  ><a class="header-anchor" href="#ifshow-show-dynamicdisabled" aria-hidden="true"
                    >#</a
                  >
                  ifShow/show/dynamicDisabled</h3
                ><p>自定义显示/禁用</p
                ><div class="language-vue">
                  <pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>m-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BasicForm</span> <span class="token attr-name">@register</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>register<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> BasicForm<span class="token punctuation">,</span> FormSchema<span class="token punctuation">,</span> useForm <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;/@/components/Form/index&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> schemas<span class="token operator">:</span> FormSchema<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      field<span class="token operator">:</span> <span class="token string">&#39;field1&#39;</span><span class="token punctuation">,</span>
      component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span><span class="token punctuation">,</span>
      label<span class="token operator">:</span> <span class="token string">&#39;字段1&#39;</span><span class="token punctuation">,</span>
      colProps<span class="token operator">:</span> <span class="token punctuation">{</span>
        span<span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function-variable function">show</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> values <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token operator">!</span><span class="token operator">!</span>values<span class="token punctuation">.</span>field5<span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      field<span class="token operator">:</span> <span class="token string">&#39;field2&#39;</span><span class="token punctuation">,</span>
      component<span class="token operator">:</span> <span class="token string">&#39;Input&#39;</span><span class="token punctuation">,</span>
      label<span class="token operator">:</span> <span class="token string">&#39;字段2&#39;</span><span class="token punctuation">,</span>
      colProps<span class="token operator">:</span> <span class="token punctuation">{</span>
        span<span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function-variable function">ifShow</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> values <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token operator">!</span><span class="token operator">!</span>values<span class="token punctuation">.</span>field6<span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      field<span class="token operator">:</span> <span class="token string">&#39;field3&#39;</span><span class="token punctuation">,</span>
      component<span class="token operator">:</span> <span class="token string">&#39;DatePicker&#39;</span><span class="token punctuation">,</span>
      label<span class="token operator">:</span> <span class="token string">&#39;字段3&#39;</span><span class="token punctuation">,</span>
      colProps<span class="token operator">:</span> <span class="token punctuation">{</span>
        span<span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function-variable function">dynamicDisabled</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> values <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token operator">!</span><span class="token operator">!</span>values<span class="token punctuation">.</span>field7<span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">;</span>

  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    components<span class="token operator">:</span> <span class="token punctuation">{</span> BasicForm <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">[</span>register<span class="token punctuation">,</span> <span class="token punctuation">{</span> setProps <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useForm</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        labelWidth<span class="token operator">:</span> <span class="token number">120</span><span class="token punctuation">,</span>
        schemas<span class="token punctuation">,</span>
        actionColOptions<span class="token operator">:</span> <span class="token punctuation">{</span>
          span<span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        register<span class="token punctuation">,</span>
        schemas<span class="token punctuation">,</span>
        setProps<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div
                ><hr /><p
                  >见
                  <a
                    href="https://2x.antdv.com/components/form-cn/#%E6%A0%A1%E9%AA%8C%E8%A7%84%E5%88%99"
                    target="_blank"
                    rel="noopener noreferrer"
                    >antv form</a
                  ></p
                ><h2 id="slots"
                  ><a class="header-anchor" href="#slots" aria-hidden="true">#</a> Slots</h2
                ><table
                  ><thead
                    ><tr><th>名称</th><th>说明</th></tr></thead
                  ><tbody
                    ><tr><td>formFooter</td><td>表单底部区域</td></tr
                    ><tr><td>formHeader</td><td>表单顶部区域</td></tr
                    ><tr><td>resetBefore</td><td>重置按钮前</td></tr
                    ><tr><td>submitBefore</td><td>提交按钮前</td></tr
                    ><tr><td>advanceBefore</td><td>展开按钮前</td></tr
                    ><tr><td>advanceAfter</td><td>展开按钮后</td></tr></tbody
                  ></table
                ><h2 id="apiselect"
                  ><a class="header-anchor" href="#apiselect" aria-hidden="true">#</a> ApiSelect</h2
                ><p
                  >远程下拉加载组件，该组件可以用于学习参考如何自定义组件集成到 Form
                  组件内，将自定义组件交由 Form 去管理</p
                ><h3 id="usage-1"
                  ><a class="header-anchor" href="#usage-1" aria-hidden="true">#</a> Usage</h3
                ><div class="language-ts">
                  <pre><code><span class="token keyword">const</span> schemas<span class="token operator">:</span> FormSchema<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    field<span class="token operator">:</span> <span class="token string">&#39;field&#39;</span><span class="token punctuation">,</span>
    component<span class="token operator">:</span> <span class="token string">&#39;ApiSelect&#39;</span><span class="token punctuation">,</span>
    label<span class="token operator">:</span> <span class="token string">&#39;字段&#39;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div
                ><h3 id="props-1"
                  ><a class="header-anchor" href="#props-1" aria-hidden="true">#</a> Props</h3
                ><table
                  ><thead
                    ><tr><th>属性</th><th>类型</th><th>默认值</th><th>说明</th></tr></thead
                  ><tbody
                    ><tr
                      ><td>numberToString</td><td><code>boolean</code></td
                      ><td><code>false</code></td
                      ><td>是否将<code>number</code>值转化为<code>string</code></td></tr
                    ><tr
                      ><td>api</td
                      ><td
                        ><code
                          >()=&gt;Promise&lt;{ label: string; value: string; disabled?: boolean
                          }[]&gt;</code
                        ></td
                      ><td>-</td><td>数据接口，接受一个 Promise 对象</td></tr
                    ><tr
                      ><td>params</td><td><code>object</code></td
                      ><td>-</td><td>接口参数。此属性改变时会自动重新加载接口数据</td></tr
                    ><tr
                      ><td>resultField</td><td><code>string</code></td
                      ><td>-</td
                      ><td
                        >接口返回的字段，如果接口返回数组，可以不填。支持<code>x.x.x</code>格式</td
                      ></tr
                    ><tr
                      ><td>labelField</td><td><code>string</code></td
                      ><td><code>label</code></td
                      ><td
                        >下拉数组项内<code>label</code>显示文本的字段，支持<code>x.x.x</code>格式</td
                      ></tr
                    ><tr
                      ><td>valueField</td><td><code>string</code></td
                      ><td><code>value</code></td
                      ><td
                        >下拉数组项内<code>value</code>实际值的字段，支持<code>x.x.x</code>格式</td
                      ></tr
                    ><tr
                      ><td>immediate</td><td><code>boolean</code></td
                      ><td><code>true</code></td
                      ><td>是否立即请求接口，否则将在第一次点击时候触发请求</td></tr
                    ></tbody
                  ></table
                ><h2 id="apitreeselect"
                  ><a class="header-anchor" href="#apitreeselect" aria-hidden="true">#</a>
                  ApiTreeSelect</h2
                ><p>远程下拉树加载组件，和<code>ApiSelect</code>类似，2.6.1以上版本</p
                ><h3 id="props-2"
                  ><a class="header-anchor" href="#props-2" aria-hidden="true">#</a> Props</h3
                ><table
                  ><thead
                    ><tr><th>属性</th><th>类型</th><th>默认值</th><th>说明</th></tr></thead
                  ><tbody
                    ><tr
                      ><td>api</td
                      ><td
                        ><code
                          >()=&gt;Promise&lt;{ label: string; value: string; children?: any[]
                          }[]&gt;</code
                        ></td
                      ><td>-</td><td>数据接口，接受一个 Promise 对象</td></tr
                    ><tr
                      ><td>params</td><td><code>object</code></td
                      ><td>-</td><td>接口参数。此属性改变时会自动重新加载接口数据</td></tr
                    ><tr
                      ><td>resultField</td><td><code>string</code></td
                      ><td>-</td
                      ><td
                        >接口返回的字段，如果接口返回数组，可以不填。支持<code>x.x.x</code>格式</td
                      ></tr
                    ><tr
                      ><td>immediate</td><td><code>boolean</code></td
                      ><td><code>true</code></td
                      ><td>是否立即请求接口。</td></tr
                    ></tbody
                  ></table
                ><h2 id="radiobuttongroup"
                  ><a class="header-anchor" href="#radiobuttongroup" aria-hidden="true">#</a>
                  RadioButtonGroup</h2
                ><p>Radio Button 风格的选择按钮</p
                ><h3 id="usage-2"
                  ><a class="header-anchor" href="#usage-2" aria-hidden="true">#</a> Usage</h3
                ><div class="language-ts">
                  <pre><code><span class="token keyword">const</span> schemas<span class="token operator">:</span> FormSchema<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    field<span class="token operator">:</span> <span class="token string">&#39;field&#39;</span><span class="token punctuation">,</span>
    component<span class="token operator">:</span> <span class="token string">&#39;RadioButtonGroup&#39;</span><span class="token punctuation">,</span>
    label<span class="token operator">:</span> <span class="token string">&#39;字段&#39;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div
                ><h3 id="props-3"
                  ><a class="header-anchor" href="#props-3" aria-hidden="true">#</a> Props</h3
                ><table
                  ><thead
                    ><tr><th>属性</th><th>类型</th><th>默认值</th><th>说明</th></tr></thead
                  ><tbody
                    ><tr
                      ><td>options</td
                      ><td><code>{ label: string; value: string; disabled?: boolean }[]</code></td
                      ><td>-</td><td>数据字段</td></tr
                    ></tbody
                  ></table
                ></div
              ></div
            ><footer class="page-footer" data-v-4c107763 data-v-ddc19c16
              ><div class="edit" data-v-ddc19c16
                ><div class="edit-link" data-v-ddc19c16 data-v-5c10c4bc
                  ><a
                    class="link"
                    href="https://github.com/anncwb/vue-vben-admin-doc/edit/main/components/form.md"
                    target="_blank"
                    rel="noopener noreferrer"
                    data-v-5c10c4bc
                    >为此页提供修改建议
                    <svg
                      class="icon outbound icon"
                      xmlns="http://www.w3.org/2000/svg"
                      aria-hidden="true"
                      x="0px"
                      y="0px"
                      viewbox="0 0 100 100"
                      width="15"
                      height="15"
                      data-v-5c10c4bc
                    >
                      <path
                        fill="currentColor"
                        d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                      ></path>
                      <polygon
                        fill="currentColor"
                        points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                      ></polygon></svg></a></div></div
              ><div class="updated" data-v-ddc19c16><!----></div></footer
            ><div class="next-and-prev-link" data-v-4c107763 data-v-0002a634
              ><div class="container" data-v-0002a634
                ><div class="prev" data-v-0002a634
                  ><a class="link" href="/doc-next/components/auth" data-v-0002a634
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewbox="0 0 24 24"
                      class="icon icon-prev"
                      data-v-0002a634
                    >
                      <path
                        d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"
                      ></path></svg
                    ><span class="text" data-v-0002a634>Authority</span></a
                  ></div
                ><div class="next" data-v-0002a634
                  ><a class="link" href="/doc-next/components/table" data-v-0002a634
                    ><span class="text" data-v-0002a634>Table</span
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewbox="0 0 24 24"
                      class="icon icon-next"
                      data-v-0002a634
                    >
                      <path
                        d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"
                      ></path></svg></a></div></div></div
            ><!--[--><!--]--></div
          ></main
        ></div
      ><!----><!--]--></div
    >
    <script>
      __VP_HASH_MAP__ = JSON.parse(
        '{"index.md":"2734edcc","readme.md":"e1519bf2","dep_cors.md":"204fc85f","dep_dark.md":"43a11d42","dep_i18n.md":"a802b766","dep_icon.md":"439f8e1c","dep_lint.md":"e8646b9e","components_auth.md":"b02963b8","components_basic.md":"fca49067","components_click-out-side.md":"88043de3","components_code-editor.md":"6afcba77","components_collapse-container.md":"b2928273","components_count-down.md":"c92778a4","components_count-to.md":"c17f243c","components_cropper.md":"4a855951","components_desc.md":"44431141","components_drawer.md":"f8ba528e","components_excel.md":"d99f9b91","components_flow-chart.md":"edffb78e","components_form.md":"047930e8","components_icon.md":"0ffa2e82","components_introduction.md":"7cb286c9","components_json-preview.md":"c1dd06c0","components_lazy-container.md":"60c806dc","components_loading.md":"06300eaf","components_markdown.md":"0c696756","components_modal.md":"135caed7","components_page.md":"28a90d66","components_pop-confirm-button.md":"c26f7c65","components_qrcode.md":"dac7ed30","components_scroll-container.md":"1dffa01f","components_strength-meter.md":"d8a0e073","components_table.md":"9ffc20f8","components_time.md":"364e4fcd","components_tinymce.md":"27726c6d","components_transition.md":"1c742571","components_tree.md":"9f313e94","components_upload.md":"5eaac62a","components_verify.md":"d40e7d3d","components_virtual-scroll.md":"9df7959b","guide_auth.md":"7bab7e41","guide_component.md":"35361b68","guide_deploy.md":"5e737a9c","guide_design.md":"12ad7145","guide_electron.md":"c05175be","guide_index.md":"773f5681","guide_introduction.md":"70896801","guide_lib.md":"f35e142b","guide_menu.md":"a61b3e0c","guide_mock.md":"7ad03e52","guide_router.md":"4af7d754","guide_settings.md":"15dd5414","other_donate.md":"a2bcdefe","other_doubt.md":"7d012b2e","other_faq.md":"e1457c01","other_server.md":"3adeb1fd","components_functional_context-menu.md":"c6c1cfd3","components_functional_loading.md":"b7278715","components_functional_preview.md":"90804e55","components_glob_button.md":"29118f06"}',
      );
    </script>
    <script type="module" async src="/doc-next/assets/app.9ea9a1e7.js"></script>
  </body>
</html>
